<template>
  <div class="page">
    <c-title :hide="false" text="门店列表"></c-title>
    <div class="top">
      <div class="topfield">
        <van-row>
          <van-col span="12">
            <div class="shi">市:</div>
            <select v-model="shiqu" @change="getcityid()">
              <option label="请选择城市" value="null"></option>
              <option v-for="(item, index) in cityList" :key="index" :label="item.areaname" :value="item.id"></option></select
          ></van-col>
          <van-col span="12">
            <div class="shi">区:</div>
            <select v-model="quxian" @change="getcityid()">
              <option label="请选择区县" value="null"></option>
              <option v-for="(item, index) in quList" :key="index" :label="item.areaname" :value="item.id"></option></select
          ></van-col>
        </van-row>
      </div>
      <div class="content">
        <div>
          <div class="title">门店列表</div>
          <van-list :finished="finished" class="bottom" v-if="List.length != 0">
            <van-cell>
              <div class="bottomclass" v-for="(item, index) in List" :key="index" @click="gomd(item.id)">
                <div class="img">
                  <img :src="item.thumb" />
                </div>
                <div class="r">
                  <div class="menname">
                    <div class="b">门店名称：</div>
                    <div class="l">{{ item.store_name }}</div>
                  </div>
                  <div class="address">
                    <div class="b">门店地址：</div>
                    <div class="l">{{ item.address }}</div>
                  </div>
                  <div class="phone">
                    <div class="b">联系电话：</div>
                    <div class="l">{{ item.mobile }}</div>
                  </div>
                </div>
              </div>
            </van-cell>
          </van-list>
        </div>
      </div>
    </div>
    <div class="botton"></div>
  </div>
</template>

<script>
import { areaList } from "@vant/area-data";

import { Toast } from "vant";
export default {
  data() {
    return {
      a: null,
      arealist: areaList,
      getList: [],
      id: null,
      showArea: false,
      cityList: [],
      quList: [],
      List: [],
      province_id: 0,
      shiqu: null,
      quxian: null,
      cityshow: false,
      dqshow: false
    };
  },
  activated() {
    this.province_id = this.$route.query.province_id;
    this.getcity();
    this.getLists();
  },
  methods: {
    getcityid() {
      this.getqu();
    },
    getcity() {
      $http
        .post("plugin.store-cashier.frontend.store.new.get-shi", {
          sheng_id: this.province_id
        })
        .then(response => {
          this.cityList = response.data.list;
        });
    },
    getqu() {
      if (this.shiqu != "null") {
        $http
          .post("plugin.store-cashier.frontend.store.new.get-qu", {
            shi_id: this.shiqu
          })
          .then(response => {
            this.quList = response.data.list;
            this.getLists();
          });
      } else {
        this.quList = {};
        Toast("请先选择城市");
      }
    },
    getLists() {
      $http
        .post("plugin.store-cashier.frontend.store.store-ecology.index", {
          province_id: this.province_id,
          city_id: this.shiqu,
          district_id: this.quxian
        })
        .then(response => {
          this.List = response.data.data;
          console.log(this.List);
          if (this.List.length==0) {
            Toast("该地区没有门店");
            return;
          }
        });
    },
    // 跳转
    gomd(id) {
      this.$router.push(
        this.fun.getUrl("o2oStore_v2", {
          store_id: id
        })
      );
    },
    onAreaConfirm(val) {
      this.arrArea = "";

      val.forEach(item => {
        console.log(item.code);

        if (item) {
          this.arrArea += item.name + " ";
          if (item.code != "") {
            this.address.push(item.code);
          }
        }
      });
      this.getList();
      this.showArea = false;
    }
  }
};
</script>

<style scoped lang="scss">
.page {
  .top {
    .topfield {
      .van-row {
        margin-top: 1rem;
        .van-col {
          display: flex;
          .shi {
            display: flex;
            margin-top: 0.3rem;
            font-size: 1.1rem;
            margin-left: 2rem;
          }
          select {
            display: flex;
            justify-content: space-around;
            background: url("../../assets/images/goods/xl.png") no-repeat scroll right 0.03rem top 0.5rem transparent;
            width: 6rem;
            height: 2rem;
            font-size: 1rem;
          }
        }
      }
    }
  }
  .content {
    .title {
      font-size: 1.1rem;
      margin-top: 1rem;
    }
    .bottom {
      .bottomclass {
        display: flex;
        border-radius: 1rem;
        background: #fff;
      }
      .van-cell {
        border-radius: 1rem;
        margin-bottom: 1rem;
      }
      .r {
        margin-left: 3rem;
      }
      .img {
        display: flex;
        img {
          width: 5rem;
          height: 5rem;
          border-radius: 3rem;
          margin-left: 1rem;
        }
      }
      .b {
        font-weight: 500;
        margin-bottom: 0.5rem;
      }
      .address {
        display: flex;
        justify-content: left;
      }
      .menname {
        display: flex;
      }
      .phone {
        display: flex;
        justify-content: right;
      }
    }
  }
}
</style>